function Swiper(el){
    this.el=document.querySelector(el)
    this.t=null
    this.num=1
    this.pages=this.el.querySelectorAll('ul li')
    this.init()
}
Swiper.prototype.init=function(){
    // 自动播图模式
    this.auto()
    // 鼠标移入
    this.pageOver()
    this.pageOut()
}
Swiper.prototype.auto=function(){
    this.t=setInterval(()=>{
        this.num++
        if(this.num>6)this.num=1
        this.el.querySelector('img').src=`./imgs/img${this.num}.jpg`
        // 同步圈圈,直接调用
    //     获取所有圈圈
    //    this.el.querySelector('ul li.active').className=''
    //    this.el.querySelector(`ul li:nth-of-type(${num})`).className='active'
    this.tbQuan(this.num)
    },1000)
}
Swiper.prototype.tbQuan=function(num){
    this.el.querySelector('ul li.active').className=''
       this.el.querySelector(`ul li:nth-of-type(${num})`).className='active'
}
Swiper.prototype.pageOver=function(){
    this.pages.forEach((item,i) => {
       item.onmouseover=()=>{
       clearInterval(this.t)
       this.num=i+1
       this.el.querySelector('img').src=`./imgs/img${i+1}.jpg`
       this.tbQuan(this.num)
       }  
    })
}

Swiper.prototype.pageOut=function(){
   this.pages.forEach((item,i)=>
   {
       item.onmouseout=()=>{
           this.auto()
       }
   })
 }